<!-- 社会治理表单 -->
<template>
<v-dialog persistent fullscreen :value="dialog" transition='scroll-x-transition'>
  <v-card>
    <v-container fluid>
      <v-row>
        <v-col cols="6">
          <p class="title">消息数据</p>
          <v-form>
            <v-row>
              <v-col cols="8">
                <v-text-field
                  :color="formData.first.color"
                  v-model="formData.first.value"
                  label="通知标题"
                  placeholder="通知标题"
                  name="firstvalue"
                  v-validate="'required|max:10'"
                  :error-messages="errors.collect('firstvalue')"
                  data-vv-as="通知标题"/>
              </v-col>
              <v-col cols="4">
                <v-color-picker v-model="formData.first.color" lable="标题颜色"></v-color-picker>
              </v-col>
              <v-col cols="8">
                <v-text-field v-model="formData.keyword1.value" label="副标题"/>
              </v-col>
              <v-col cols="4">
                <v-color-picker v-model="formData.keyword1.color" lable="副标题颜色"></v-color-picker>
              </v-col>
              <v-col cols="8">
                <v-text-field
                  v-model="formData.keyword2.value"
                  label="通知内容"
                  placeholder="请在此输入通知内容"
                  name="fkeyword2value"
                  v-validate="'required'"
                  :error-messages="errors.collect('fkeyword2value')"
                  data-vv-as="通知内容"/>
              </v-col>
              <v-col cols="4">
                <v-color-picker v-model="formData.keyword2.color" :lable="'内容颜色'"></v-color-picker>
              </v-col>
              <v-col cols="8">
                <v-text-field v-model="formData.remark.value" label="备注信息" placeholder="请在此输入备注信息" />
              </v-col>
              <v-col cols="4">
                <v-color-picker v-model="formData.remark.color" lable="备注颜色"></v-color-picker>
              </v-col>
              <v-col cols="12">
                <v-text-field
                  v-model="formData.url"
                  label="链接地址"
                  name="urlvalue"
                  v-validate="'required|url'"
                  :error-messages="errors.collect('urlvalue')"
                  data-vv-as="链接地址"></v-text-field>
              </v-col>
              <v-col cols="12">
                <v-radio-group v-model="formData.type" row dense mandatory>
                  <v-radio label="群发所有用户" value="all"></v-radio>
                  <v-radio label="按标签群发" value="tags"></v-radio>
                  <v-radio label="发给指定用户" value="openid"></v-radio>
                </v-radio-group>
              </v-col>
              <v-col cols="12">
                <TagsSelect v-if="formData.type === 'tags'" v-model="formData.touser"/>
                <MemberSelect v-if="formData.type === 'openid'" v-model="formData.touser"/>
              </v-col>
              <v-col>
                <v-checkbox label="立即发送" class="" v-model="formData.send_right_now"></v-checkbox>
              </v-col>
            </v-row>
          </v-form>
        </v-col>
        <v-col cols="6">
          <p class="title">模版信息</p>
          <TemplateCard :item="template" :data-params="formData"/>
        </v-col>
      </v-row>
    </v-container>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn @click.prevent="$emit('update:dialog', false)">取消</v-btn>
      <v-btn color="secondary" :loading="btnLoading" @click="submit">提交</v-btn>
      <v-spacer></v-spacer>
    </v-card-actions>
  </v-card>
</v-dialog>
</template>

<script>
import * as API from '@/api/admin/template.js'
import VColorPicker from '@/components/Form/ColorPicker'
import TemplateCard from './TemplateCard.vue'
import TagsSelect from './TagsSelect.vue'
import MemberSelect from './MemberSelect.vue'
export default {
  name: 'TemplateMessageSend',
  components: { VColorPicker, TemplateCard, TagsSelect, MemberSelect },
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    template: {
      type: Object,
      required: true,
      default: () => { return null }
    }
  },
  data: function () {
    return {
      btnLoading: false,
      formData: {
        send_right_now: false,
        template_id: '',
        touser: '',
        status: 'created',
        type: '',
        first: {
          value: '',
          color: '#2196F3'
        },
        keyword1: {
          value: '',
          color: '#2196F3'
        },
        keyword2: {
          value: '',
          color: '#F44336'
        },
        remark: {
          value: '',
          color: '#000000'
        }
      }
    }
  },
  methods: {
    submit: function() {
      this.$validator.validate().then(result => {
        if (result) {
          this.btnLoading = true
          this.formData.template_id = this.template.template_id
          API.createOne(this.formData).then(res => {
            this.$toasted.success(res.data)
            this.$emit('update:dialog', false)
            this.$emit('refreshdata')
          }).catch(err => {
            this.$toasted.error(err.response.data)
            return Promise.reject(err)
          }).finally(() => {
            this.btnLoading = false
          })
        }
      })
    }
  }
}
</script>
<style scoped>
</style>
